<template>
  <div class="box">
    <Category title="美食">
      <img slot="center" src="https://img1.baidu.com/it/u=4161642052,1065452095&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1663520400&t=f775eaa91c34cfc8f4af6a1be8389c14" alt="">
      <a slot="footer" href="#">更多美食</a>
    </Category>

    <Category title="游戏">
      <div slot="center">
        <ul>
          <li v-for="(game,index) in games" :key="index">
              {{game}}
          </li>
        </ul>
      </div>
      <div slot="footer" class="foot">
        <a href="#">单机游戏</a>
        <a href="#">网络游戏</a>
      </div>
    </Category>

    <Category title="电影">
        <video slot="center" controls src="D:/Users/liyu/Videos/Captures/wbb.mp4"></video>
        <template v-slot:footer>
          <div class="foot">
            <a href="#">经典</a>
            <a href="#">热门</a>
            <a href="#">推荐</a>
          </div>
          <h4>welcome</h4>
        </template>
    </Category>
  </div>
  
</template>

<script>
  import Category from "./components/Category.vue"
  export default {
    name:"App",
    components:{
      Category  
    },
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['LOL','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《你好，李焕英》','《拆弹专家》','《阿凡达》']
      }
    },
    
  }
</script>

<style>
  .box,.foot{
    display:flex;
    justify-content: space-around;
  }
  img{
    width:100%
  }
  video{
    width:100%;
  }
</style>